<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        div{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }
    
    
    </style>
</head>
<body>
    <div>

    </div>
    <script>
        /* 
        ●click ：点击事件
        ●dblclick ：双击事件
        ●contextmenu ： 右键单击事件
        ●mousedown ：鼠标左键按下事件
        ●mouseup ：鼠标左键抬起事件
        ●mousemove ：鼠标移动
        ●mouseover ：鼠标移入事件
        ●mouseout ：鼠标移出事件
        ●mouseenter ：鼠标移入事件
        ●mouseleave ：鼠标移出事件

        
        
        
        
        
        */

        var divele = document.getElementsByTagName('div')[0];
        // divele.onclick = function(){
        //     alert('單機')
        // }

        // divele.ondblclick = function(){
        //     alert('双击')
        // }


        // divele.oncontextmenu = function(){
        //     alert('右键单击')
        // }


        // divele.onmousedown = function(){
        //     alert('左键按下')
        // }

        // divele.onmouseup = function(){
        //     alert('左键抬起')
        // }
        // divele.onmousemove = function(){
        //     // 1秒 60次左右 
        //     console.log('移动中')
        // }

        divele.onmouseover = function(){
            console.log('移入')
        }

        divele.onmouseout = function(){
            console.log('移出')
        }

    </script>
</body>
</html>